<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li v-for="item in navList" class="nav-item"><router-link class="nav-link" :to="item.to" exact>{{item.name}}</router-link></li>
                </ul>
                <ul class="navbar-nav justify-content-end">
                    <li class="nav-item"><router-link class="nav-link" :to="{name: 'Add'}" exact>添加用户</router-link></li>
                </ul>
            </div>
        </nav>
    </header>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                navList: [
                    {to: {name: "Home"}, name: "用户管理系统"},
                    {to: {name: "Home"}, name: "主页"},
                    {to: {name: "AboutUs"}, name: "关于我们"}
                ]
            }
        }
    }
</script>

<style scoped>
    nav {border-bottom: 1px solid #eee;}
    .router-link-exact-active.router-link-active {color: #000;}
    ul:first-child li:first-child a {background-color: transparent !important;color: rgba(0,0,0,.5) !important;}
</style>